<template>
  <div class="box">
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;min-height:150px;padding:20px 0 !important;">
        <div class="query-list">
          <span>时间：</span>
          <p>
            <el-date-picker
              v-model="timeStart"
              class="el-picker"
              type="date"
              placeholder="开始时间"
              @change="switchTime"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <span class="date-select-right">-</span>
            <el-date-picker
              v-model="timeEnd"
              class="el-picker"
              type="date"
              placeholder="结束时间"
              @change="switchTime"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </p>
        </div>
        <div class="query-list">
          <span>标签选择：</span>
          <p>
            <span
              v-for="(item, index) in tagList"
              :key="index"
              class="lab"
              :class="{ active: tagListActiveArr.indexOf(index) > -1 }"
              @click="switchTag(index)"
              >{{ item.key }}
            </span>
          </p>
        </div>
        <div class="query-list">
          <span>情感等级：</span>
          <p>
            <span
              v-for="(item, index) in sentimentList"
              :key="index"
              class="lab"
              :class="{ active: sentimentListActiveArr.indexOf(index) > -1 }"
              @click="switchSentiment(index)"
              >{{ item.key }}</span
            >
          </p>
        </div>
      </el-card>
    </div>
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">信息走势</span>
        </div>
        <lines :infoMoveData="infoMoveData"></lines>
      </el-card>
    </div>
    <div class="card-box">
      <el-card class="elcard" style="flex:.5;align-self:normal;margin-right:10px">
        <div slot="header" class="hd clearfix">
          <span class="tit">分类统计</span>
        </div>
        <div style="background: #fff">
          <pie :classifyData="classifyData" id="classifyData"></pie>
        </div>
      </el-card>
      <el-card class="elcard" style="flex:.5;align-self:normal;margin-left:10px">
        <div slot="header" class="hd clearfix">
          <span class="tit">负面指数</span>
          <el-popover
            placement="right"
            width="300"
            trigger="hover">
            <p>采用文本情感分析算法，自动分析识别出篇章中表达的观点或态度情感倾向，如正面、中性、负面</p>
            <i slot="reference" class="explain"></i>
          </el-popover>
        </div>
        <div style="background: #fff">
          <pie :negativeData="negativeData" id="negativeData"></pie>
        </div>
      </el-card>
    </div>
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">全部搜索结果</span>
          <i class="result-num">当前为您找到相关结果约&nbsp;{{ totalVal }}个</i>
        </div>
        <ul class="result-list" v-loading="loading">
          <li v-for="(item, index) in resultList" :key="index">
            <a
              class="titles"
              :title="item._source.title"
              :href="item._source.url"
              target="_blank"
              >{{ item._source.title }}</a
            >
            <p class="abst" v-html="item._source.content"></p>
            <div class="footer">
              <p>
                {{ item._source.source }}&nbsp;&nbsp;{{ item._source.time }}
              </p>
            </div>
          </li>
        </ul>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="ips"
            @current-change="getCurrentPage"
            :current-page.sync="currentPage"
            class="el-pagination"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import lines from "./child/line";
import pie from "./child/pie";
export default {
  components: {
    lines,
    pie
  },
  data() {
    return {
      companyName: this.$route.query.name,
      timeStart: "", // 时间选择
      timeEnd: "",
      loading: false,

      source: [], // 信息来源
      sourceList: [],
      sourceListActive: 0,

      tag: [], // 标签选择
      tagList: [],
      tagListActiveArr: [0],

      sentiment: [], // 情感等级
      sentimentList: [],
      sentimentListActiveArr: [0],

      // 信息走势
      infoMoveData: [],
      ipcNumber: 3,
      chartNewsOne: [],
      isHaveChartNewsOne: "",
      // 分类统计
      classifyData: [],
      chartNewsTwo: "",
      isHaveChartNewsTwo: "",
      // 负面指数
      negativeData: [],
      chartNewsThree: "",
      isHaveChartNewsThree: "",
      // 搜索结果列表
      resultList: [],
      // 分页
      total: 0,
      totalVal: "",
      from: 0, // 分页开始条数
      currentPage: 1,
      ips: 10,
      // 文章翻译
      article: false, // 等接入译见后展示
    };
  },
  methods: {
    search() {
      this.loading = true;
      this.timeStart !== ""
        ? this.timeStart
        : (this.timeStart = `${new Date().getFullYear() - 1}-${
            new Date().getMonth() + 1
          }-${new Date().getDate()}`);
      this.timeEnd !== ""
        ? this.timeEnd
        : (this.timeEnd = `${new Date().getFullYear()}-${
            new Date().getMonth() + 1
          }-${new Date().getDate()}`);
      this.$post(this.$Url.news.search, {
        from: this.from,
        size: this.ips,
        name: this.companyName,
        tag: this.tag,
        sentiment: this.sentiment,
        gte: this.timeStart,
        lte: this.timeEnd,
      })
        .then((res) => {
          // console.log(res)
          let data = res.data;
          if (this.tagList.length <= 0) {
            this.tagList = [{ key: "全部" }].concat(
              ...data.agg["tag-aggs"].buckets
            );
          }
          if (this.sentimentList <= 0) {
            this.sentimentList = [{ key: "全部" }].concat(
              ...data.agg["sentiment-aggs"].buckets
            );
          }
          // 信息走势
          this.infoMoveData = data.agg["time-aggs"].buckets;
          // this.renderInfoMove()
          // 分类统计
          this.classifyData = data.agg["tag-aggs"].buckets;
          // this.renderClassify(data.items.total)
          // 负面指数
          this.negativeData = data.agg["sentiment-aggs"].buckets;
          //  this.renderNegative()
          // 搜索结果列表
          this.total = data.items.total.value;
          this.totalFilter();
          this.resultList = data.items.hits;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 千分符
    totalFilter() {
      let intPart = Number(this.total).toFixed(0);
      let intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      this.totalVal = intPartFormat;
    },
    // 切换时间区间
    switchTime() {
      this.from = 0;
      this.currentPage = 1;
      this.search();
    },
    // 切换标签选择
    switchTag(index) {
      if (index === 0) {
        this.tagListActiveArr = [0];
      } else {
        // 清除0
        let zeroAngle = this.tagListActiveArr.indexOf(0);
        if (zeroAngle > -1) {
          this.tagListActiveArr.splice(zeroAngle, 1);
        }

        // 用户选择的标签存入数组中
        let angle = this.tagListActiveArr.indexOf(index);
        if (angle > -1) {
          if (this.tagListActiveArr.length > 1) {
            this.tagListActiveArr.splice(angle, 1);
          }
        } else {
          this.tagListActiveArr.push(index);
        }
      }

      this.from = 0;
      this.currentPage = 1;

      if (index !== 0) {
        let spliceIndex = this.tag.indexOf(this.tagList[index].key);
        if (spliceIndex > -1) {
          if (this.tag.length > 1) {
            this.tag.splice(spliceIndex, 1);
          }
        } else {
          this.tag.push(this.tagList[index].key);
        }
      } else {
        this.tag = [];
      }
      this.search();
    },
    // 切换情感等级
    switchSentiment(index) {
      if (index === 0) {
        this.sentimentListActiveArr = [0];
      } else {
        // 清除0
        let zeroAngle = this.sentimentListActiveArr.indexOf(0);
        if (zeroAngle > -1) {
          this.sentimentListActiveArr.splice(zeroAngle, 1);
        }
        // 用户选择的标签存入数组中
        let angle = this.sentimentListActiveArr.indexOf(index);
        if (angle > -1) {
          if (this.sentimentListActiveArr.length > 1) {
            this.sentimentListActiveArr.splice(angle, 1);
          }
        } else {
          this.sentimentListActiveArr.push(index);
        }
      }

      this.from = 0;
      this.currentPage = 1;

      if (index !== 0) {
        let spliceIndex = this.sentiment.indexOf(this.sentimentList[index].key);
        if (spliceIndex > -1) {
          if (this.sentiment.length > 1) {
            this.sentiment.splice(spliceIndex, 1);
          }
        } else {
          this.sentiment.push(this.sentimentList[index].key);
        }
      } else {
        this.sentiment = [];
      }
      this.search();
    },
    getCurrentPage(val) {
      this.currentPage = val;
      val === 1 ? (this.from = 0) : (this.from = (val - 1) * 10);
      this.search();
    },
  },
  mounted() {
    this.search();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-picker .el-input__inner{
  background-color: rgba(3, 179, 140,0.07) !important;
}
.card-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  flex: .5;
  padding: 0 !important;
  text-align: left !important;
  ::v-deep {
    .el-card__header {
      position: relative;
      &:before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 5px;
        height: 30px;
        margin-top: -15px;
        content: '';
        background-color: $color101;
      }
    }
    .el-card__body {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
  .achievements {
    position: relative;
    li {
      display: block;
      border-bottom: 1px solid #EBEEF5;
      margin-bottom: 10px;
    }
  }
}
.el-row {
  background: #fff;
  margin-bottom: 20px;
}
.title {
  font-weight: bold;
  padding-left: 20px;
  text-align: left;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  span {
    display: inline-block;
    vertical-align: middle;
  }
  .explain {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    vertical-align: middle;
    background: url(../../../../../assets/img/wenhao.png) no-repeat center center;
    background-size: 100%;
    cursor: pointer;
  }
}
.query-list {
  text-align: left;
  position: relative;
  margin: 10px 20px;
  list-style: none;
}
.query-list {
  position: relative;
  float: left;
  display: block;
  width: 100%;
  min-height: 28px;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
}
.query-list > span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100px;
  line-height: 33px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: #241c75;
}
.query-list p {
  padding-left: 80px;
}
.p-left {
  padding-left: 100px !important;
}
.lab {
  display: inline-block;
  padding: 6px 18px;
  font-size: 12px;
  margin-right: 10px;
  // margin-bottom: 10px;
  border-radius: 4px;
  color: #7775da;
  background-color: #e7e7fc;
  cursor: pointer;
}
.active {
  color: #fff;
  background-color: #7578ee;
}

.result-list {
  position: relative;
  width: 100%;
  padding: 0 24px;
  text-align: left;
  list-style: none;
  padding-bottom: 10px;
}
.result-num {
  position: absolute;
  top: 20px;
  right: 20px;
  line-height: 30px;
  font-style: normal;
  font-size: 12px;
  color: #86899e;
}
.result-list li {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #d4d3f3;
}
.result-list li .titles {
  display: block;
  padding: 14px 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px !important;
  color: #4f515b;
}
.result-list li .abst {
  line-height: 26px;
  font-size: 14px;
  color: #86899e;
}
.result-list li .footer {
  position: relative;
}
.result-list li .footer p:nth-child(1) {
  font-size: 14px;
  color: #aaaeca;
  padding-top: 10px;
  padding-bottom: 20px;
}
.pagination {
  padding-bottom: 20px;
}
</style>